<template>
  <el-container class="home-wrap">
    <!-- header start -->
    <el-header class="flex">
      <div class="logo flex-item">
        <i class="el-icon-date"></i>搜谱大全管理系统
      </div>
      <div class="user-info">
        <el-dropdown @command="handleCommand">
          <el-button type="primary">
            <i class="el-icon-user-solid el-icon--left"></i
            >{{ userInfo.nickName }}
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="updatePassword"
              >修改密码</el-dropdown-item
            >
            <el-dropdown-item command="loginOut">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <!-- header end -->
    <div class="container-wrap">
      <!-- aside-nav start -->
      <div class="aside-wrap" >
        <div class="btn-wrap" :class="isCollapse?'width-64px':'width-100'">
          <div class="btn-container"  @click="isCollapse=!isCollapse">
            <img src="../assets/images/zhankaimenu.png" alt="" v-if="isCollapse==true">
            <img src="../assets/images/shouqimenu.png" alt="" v-else>
          </div>
        </div>
        <el-menu
          :default-active="activePath"
          background-color="#283643"
          text-color="#fff"
          active-text-color="#1CC09F"
          router
          :collapse="isCollapse"
          :unique-opened='true'
          :collapse-transition="false"
        >
          <el-submenu
            :index="i + ''"
            v-for="(item, i) in menuList"
            :key="i + ''"
          >
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item-group v-if="item.children">
              <el-menu-item
                :index="child.url"
                v-for="(child, n) in item.children"
                :key="n + ''"
                @click="handleSelect(child.url)"
              >
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>{{ child.name }}</span>
                </template>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <!-- aside-nav end -->

      <!-- main start -->
      <div class="main-wrap">
        <router-view />
      </div>
      <!-- main end -->
    </div>
    <updatePassword
      v-if="updatePasswordVisble"
      ref="updatePassword"
    ></updatePassword>
  </el-container>
</template>

<script>
import { userLogout } from "@/config/interface";
import updatePassword from "@/components/User/Edit.vue";
export default {
  data() {
    return {
      updatePasswordVisble: false, //修改密码面板的可见性
      menuList: this.$store.state.menuList,
      activePath: '/user',
      reqFlag: {
        logout: true,
      },
      isCollapse: false,
    };
  },
  components: {
    updatePassword,
  },
  computed: {
    userInfo: function () {
      let userInfo = this.$store.state.userInfo;
      return userInfo;
    },
  },
  watch: {
    $route: function (to, from) {
      this.activePath = to.meta.pagePath;
    },
  },
  created() {
    this.activePath = this.$route.meta.pagePath;
  },
  methods: {
    handleCommand(command) {
      if (command == "loginOut") {
        this.loginOut();
      }
      // 如果是修改密码
      if (command == "updatePassword") {
        // this.loginOut()
        // alert('你好s')
        this.updatePasswordVisble = true;
        this.$nextTick(() => {
          this.$refs.updatePassword.init(this.$store.state.userInfo.id);
        });
      }
    },
    // 登出
    loginOut() {
      // const url = userLogout;
      // if (this.reqFlag.logout) {
      //   this.reqFlag.logout = false;
      // let params = {};
      // this.$http(url, params).then((res) => {
      //   if (res.code == 1) {
      localStorage.clear();
      this.$store.dispatch("saveUserInfo", {});
      this.$common.toast("登出成功", "success", false);
      this.$router.replace({ path: "/" });
      //   }
      //   this.reqFlag.logout = true;
      // });
      // }
    },
    // 解决element导航中，当前导航路由标识和当前路由一致时，点击当前导航，页面不刷新问题
    // handleSelect(indexPath) {
    //   if (indexPath == this.$route.path) {
    //     // console.log(233333);
    //     console.log(indexPath,'indexPath');
    //     console.log(this.$route,'path');
    //     // this.$common.shallowRefresh(this.$route.name);
    //   }
    // },
  },
};
</script>

<style scoped lang="scss">

.btn-container{
  width:70%;
  height: 100%;
  margin:0 auto
}
.btn-container>img{
  display: block;
  margin:0 auto;
  width:44.8px;
  height: 100%;
}
.width-64px{
  width:64px;
}
.width-100{
  width: 100%;
}
.btn-wrap{
  box-sizing: border-box;
  padding: 7px 0;

  height: 56px;
  background-color: #283643;
}

.home-wrap {
  width: 100%;
  height: 100%;
  .el-header {
    line-height: 60px;
    color: $color-white;
    background: $color-main;
    .logo {
      font-size: 20px;
    }
    .user-info .el-button {
      font-size: 16px;
    }
  }
  .el-aside {
    background: #283643;
  }
  .el-menu {
    border: none;
    .el-menu-item {
      font-size: 16px;
    }
  }
}
.el-dropdown-menu__item {
  padding: 0 40px;
  span {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.el-icon-date {
  margin-right: 10px;
}
::v-deep .el-submenu__title {
  font-size: 18px !important;
}
</style>
